<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>炉石卡牌生成器</title>
<jsp:include page="../../public/header.jsp"/>
</head>
<body>
	<jsp:include page="../../public/nav.jsp"/>
			
<form action="/upload.do" enctype="multipart/form-data" method="post">
	<div class="row">		
		<div class="col-xs-4 col-xs-offset-1">
			<h2>工具区</h2>
	 		<div class="form-group">
	 			<label for="carType">卡牌类型：</label>
				<div class="radio" >
  					<label> <input type="radio" name="carType" value="1" checked>随从</label>
     				<label><input type="radio" name="carType" value="2">法术</label>
     				<label><input type="radio" name="carType" value="3">武器</label>
				</div>
			</div>
 			<div class="form-group">
 				<label >职业：</label>
  				<select id="prefission" class="form-control">
	  				<option value="1">中立</option>
	  				<option value="2">法师</option>
	  				<option value="3">术士</option>
	  				<option value="4">战士</option>
	  				<option value="5">德鲁伊</option>
	 				<option value="6">牧师</option>
	  				<option value="7">潜行者</option>
	  				<option value="8">猎人</option>
	  				<option value="9">骑士</option>
	  				<option value="12">萨满</option>
				</select>
  			</div>
		  <div class="form-group">
		    <label for="name">名字：</label>
		    <input type="text" class="form-control" name="name" id="name">
		  </div>
		   <div class="form-group">
		    <label for="race">属性:</label>
		    <input type="text" class="form-control" id="race" placeholder="水元素">
		  </div>
		 <div class="form-group">
		    <label for="desc">描述:</label>
		    <textArea type="text" class="form-control" id="desc" placeholder="特殊效果请用(<b>嘲讽</b>)"></textArea>
		 </div>
		 <div class="form-inline">
			 <div class="form-group col-xs-4" >
			    <label for="magic">需要水晶:</label>
			    <input type="text" class="form-control" id="magic" placeholder="" style="width: 40px;">
			  </div>
			  <div class="form-group col-xs-4">
			    <label for="hit">攻击:</label>
			    <input type="text" class="form-control" id="hit" placeholder="" style="width: 40px;">
			  </div>
			  <div class="form-group col-xs-4">
			    <label for="health">血量(HP):</label>
			    <input type="text" class="form-control" id="health" placeholder="" style="width: 40px;">
			  </div>
		  </div>
		  <div class="form-group">
 				<label >稀有度：</label>
  				<select id="power" class="form-control">
	  				<option value="1">白板</option>
	  				<option value="2">专家级</option>
	  				<option value="3">稀有</option>
	  				<option value="4">史诗</option>
	  				<option value="5">传说</option>
				</select>
  			</div>
		  <a id="start"  class="btn btn-primary" click="return false;">创建</a>
		  </div>
		  <div class="col-xs-6">
		  	<img id="img" src="">
		  </div>
  		
	</div>
	</div>
	</form>
			
		</div>
	</div>
	
<jsp:include page="../../public/footer.jsp"/>
<jsp:include page="../../public/footer2.jsp"/>
</body>
	<script type="text/javascript">
	$(function(){
	 	$("#start").click(function(){
	 		$("#img").attr("src","/image/hearthstone/getCard.html?carType="+
	 				$('input:radio[name="carType"]:checked').val() + "&prefission="+
	 				$("#prefission").val() + "&name=" + $("#name").val() +
	 				"&race=" + $("#race").val() + "&desc=" + $("#desc").val() +
	 				"&magic=" + $("#magic").val() + "&hit=" + $("#hit").val() + 
	 				"&health=" + $("#health").val() + "&power=" + $("#power").val())
	 		return false;
	 		var data = {carType:$('input:radio[name="carType"]:checked').val(),
	 				prefission:$("#prefission").val(),
	 				name:$("#name").val(),
	 				race:$("#race").val(),
	 				desc:$("#desc").val(),
	 				magic:$("#magic").val(),
	 				hit:$("#hit").val(),
	 				health:$("#health").val(),
	 				power:$("#power").val()
	 				}
	 		var params = {url:"/image/hearthstone/getCard.html",type:'post',data:data,dataType:'json',success:function(data){
	 			
	 		}}
	 		$.ajax(params);
	 		return false;
	 	});
	});
	</script>
</html>